<template>
  
    <el-container class="home-con">
      <el-header>
        <div>
          <img src="../assets/logo.png" alt="" />
          <span>管理系統</span>
        </div>
         <!-- <el-button type="success" @click="register">注册</el-button> -->
        <el-button type="info" @click="logout">退出</el-button>
      </el-header>
      <el-container>
        <!-- 側邊 -->
        <el-aside width="200px">
          <tree :children="this.menuLists"></tree>
        </el-aside>
        <!-- 主界面 -->
        <el-main>
            <router-view/>
        </el-main>
      </el-container>
    </el-container>
</template>

<script>
import tree from "@/components/tree.vue";
export default {
  data() {
    return {
      menuLists: [],
    };
  },
  created() {
    this.getMenuList();
  },
  components: {
    tree,
  },
  methods: {
    logout() {
      this.$http.post("/stu/logOut");
      //退出就清空session
      window.sessionStorage.clear();
      this.$router.push("/login");
    },
    // register(){
    //   this.$router.push({path:'/register'})
    // },
    //獲取所有的菜單
    async getMenuList() {
      var form = { authorityId: window.sessionStorage.getItem("authorityId") }
      const { data: res } = await this.$http.post("/stu/menuForUser", form)
     
      if (res.code !== 0) this.$message.error("获取菜单失败:" + res.msg)
      this.menuLists = res.data
    },
  },
};
</script>

<style lang="less" scoped>
.home-con {
  height: 100%;
}
img {
  width: 20%;
  // height: 20%;
  border-radius: 50%;
}
.el-header {
  background-color: rgb(52, 129, 119);
  display: flex;
  justify-self: space-between;
  padding-left: 0;
  align-items: center;
  > div {
    display: flex;
    align-items: center;
  }
}
.el-aside {
  background-color: rgb(41, 162, 167);
}

</style>